<script lang="ts" setup>
import { format } from 'date-fns';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { usePopupStore } from '@/store/popup';
import { getDefaultBeforeDate } from '@/utils/date';
import { useLocale } from '@/locale/locale';

const props = defineProps<{
  date: string;
  time: string;
  serviceType: string;
  dateList: any;
  timeList: any;
  advanceOrderHour: number
}>();

const { t } = useLocale();
const popupStore = usePopupStore();
const { carDatetimePickerRef } = storeToRefs(popupStore);

const selectedTime = ref('');

const nowDate = ref(format(new Date(), 'yyyy-MM-dd'));

const serviceType = ref('pickUp');

const showDateList = ref([]);
const showTimeList = ref([]);

const currentDate = ref({
  before: ''
});

const currentTime = ref('');

popupStore.onOpened('CAR_DATETIME', async () => {
  showDateList.value = props.dateList;
  showTimeList.value = props.timeList;
  currentDate.value.before = props.date
    ? props.date
    : showDateList.value.length <= 0
      ? getDefaultBeforeDate()
      : showDateList.value[0];
  currentTime.value = props.time;
  serviceType.value = props.serviceType;

  initTimeList()
});

function initTimeList(){
  const initNow = new Date(new Date().toLocaleString("ja-JP",{timeZone: "Asia/Tokyo"})); // 获取当前时间
  const now = new Date(new Date().toLocaleString("ja-JP",{timeZone: "Asia/Tokyo"})); // 获取当前时间
  now.setHours(now.getHours() + props.advanceOrderHour); // 当前时间 + 5 小时


  showTimeList.value.forEach((item,index) => {
    if((currentDate.value.before == getDefaultBeforeDate() && initNow > new Date(currentDate.value.before + ' ' + item.time)) || (props.advanceOrderHour > 0 && now > new Date(currentDate.value.before + ' ' + item.time))){
      if(selectedTime.value == item.time){
        selectedTime.value = ''
      }
      item.canChoose = false;

    }else{
      item.canChoose = true;
    }
  })

}

function chooseTime(item: any) {
  if(!item.canChoose){
    return false;
  }
  selectedTime.value = item.time;
}

function handleCalendarChange(value: any) {
  currentDate.value.before = value.fulldate;
  initTimeList()
}

const emit = defineEmits<{ update: [date: string, time: string] }>();

function handleConfirm() {
  if (!currentDate.value.before || !selectedTime.value) {
    uni.showToast({
      title: '请选择用车时间',
      icon: 'none'
    });
    return;
  }
  popupStore.closeCarDatetimePicker();
  emit('update', currentDate.value.before, selectedTime.value);
}
</script>

<template>
  <apt-popup-car
    ref="carDatetimePickerRef"
    :showConfirmBtn="false"
    :title="t('TransferSelectDate')"
    height="80vh"
    title-position="left"
    @close="popupStore.closeCarDatetimePicker"
  >
    <view class="apt-car-datetime-picker">
      <uni-calendar
        :date="currentDate"
        :date-list="showDateList"
        :show-month="false"
        :start-date="nowDate"
        checked-background="#F75D5D"
        @change="handleCalendarChange"
      />
      <view class="apt-car-datetime-time-container">
        <view class="apt-car-datetime-time-container-title">
          {{ t('TransferSelectDateUseCar') }}
        </view>
        <view v-if="serviceType == 'delivery'" class="apt-car-datetime-time-container-tips">
          {{ t('TransferMsg2') }}
        </view>
        <view v-if="serviceType == 'pickUp'" class="apt-car-datetime-time-container-tips">
          {{ t('TransferMsg1') }}
        </view>
        <scroll-view class="apt-car-datetime-time-container-list" scroll-x>
          <template  v-for="(item, index) in showTimeList"  :key="index">
            <view
              v-if="item.canChoose"
              :class="selectedTime == item.time ? 'active' : (!item.canChoose ? 'disabled' : '')"
              @click="chooseTime(item)"
            >
              {{ item.time }}
            </view>
          </template>
        </scroll-view>
      </view>
    </view>
    <view class="apt-car-datetime-picker-btn">
      <view @click="handleConfirm">{{ t('TransferFixHour') }}</view>
    </view>
  </apt-popup-car>
</template>

<style lang="scss">
.apt-car-datetime-time-container {
  margin-top: 30rpx;
  border-top: 1px solid #f4f4f4;
  padding: 40rpx 0 70rpx;

  &-title {
    font-weight: 500;
    font-size: 36rpx;
    color: #3d3d3d;
    line-height: 52rpx;
  }

  &-tips {
    margin-top: 10rpx;
    background: #fff3ec;
    border-radius: 6rpx;
    padding: 24rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #b84c16;
    line-height: 34rpx;
    margin-bottom: 40rpx;
  }

  &-list {
    white-space: nowrap;
    width: 100%;

    view {
      display: inline-block;
      width: 136rpx;
      height: 72rpx;
      background: #f4f4f4;
      border-radius: 8rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #707070;
      line-height: 72rpx;
      text-align: center;
      margin-right: 30rpx;

      &:last-child {
        margin-right: 0;
      }

      &.disabled{
        color: #c0c0c0;
      }

      &.active {
        background: #f75d5d;
        color: #ffffff;
      }
    }
  }
}

.apt-car-datetime-picker-btn {
  padding-bottom: 30rpx;
  view {
    height: 76rpx;
    line-height: 76rpx;
    background: #ff5a60;
    border-radius: 8rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
  }
}
</style>
